<template>
  <div class="section">
    <div class="container" v-reveal>
      <el-page-header content="衍生" />
      <div>
        <p class="title">头像</p>
        <div class="avatar-list">
          <el-row :gutter="16">
            <el-col :xs="24" :sm="12" :md="6" v-for="(avatar, index) in avatars" :key="index">
              <div class="avatar-item">
                <img class="avatar-image" :src="avatar.img" :alt="avatar.name" />
                <p class="avatar-name">{{ avatar.name }}</p>
              </div>
            </el-col>
          </el-row>
        </div>
        <p class="title">小红书</p>
        <div class="avatar-list">
          <el-row :gutter="16">
            <el-col :xs="24" :sm="12" :md="6" v-for="(per, index) in pers" :key="index">
              <div class="link-preview" @click="handleClick(per)">
                <div class="link-preview-header">
                  <div class="link-preview-url">{{ per }}</div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import LinkPreview from '../components/LinkPreview.vue'

const avatars = ref([
  {
    name: '小猪妖',
    img: new URL('../assets/images/avatars/1.jpg', import.meta.url).href
  },
  {
    name: '蛤蟆精',
    img: new URL('../assets/images/avatars/2.jpg', import.meta.url).href
  },
  {
    name: '黄鼠狼精',
    img: new URL('../assets/images/avatars/3.jpg', import.meta.url).href
  },
  {
    name: '猩猩怪',
    img: new URL('../assets/images/avatars/4.jpg', import.meta.url).href
  }
])
const pers = ref(['https://www.baidu.com/', 'https://www.xiaohongshu.com/search_result?keyword=%25E6%25B5%25AA%25E6%25B5%25AA%25E5%25B1%25B1%25E7%259A%2584%25E5%25B0%258F%25E5%25A6%2596%25E6%2580%25AA%25E5%2589%25A7%25E7%2585%25A7&source=web_search_result_notes'])

const handleClick = (url)=>{
  window.open(url)
}

</script>

<style lang="scss" scoped>
.mt {
  margin-top: 16px
}

ul {
  margin: 0;
  padding-left: 18px
}

.title {
  font-size: 16px;
  font-weight: 500;
}

.avatar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.avatar-name {
  margin-top: 8px;
}

.avatar-image {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.link-preview {
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;

  .link-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 24px;
    cursor: pointer;

    .link-preview-url {
      font-size: 14px;
      color: #999;
      overflow: hidden;
      text-align: left;
      cursor: pointer;
    }
  }
}
</style>